<template>
  <div class="GykjMap-emergency">
    <div class="GykjMap-emergency-tabs">
      <Tabs type="card" v-model="activeTab" :animated="false">
        <TabPane label="基本情况" name="info"></TabPane>
        <TabPane label="物料信息" name="measures"></TabPane>
      </Tabs>
    </div>
    <div class="GykjMap-emergency-content">
      <div class="GykjMap-emergency-table" v-show="activeTab === 'info'">
        <table border class="table">
          <tbody>
            <tr>
              <td>所属单位</td>
              <td>{{fliterData('institution')}}</td>
              <td>仓库名称</td>
              <td>{{fliterData('name')}}</td>
            </tr>
            <tr>
              <td>仓库地址</td>
              <td>{{fliterData('address')}}</td>
              <td>物资库存</td>
              <td>{{fliterData('institution')}}</td>
            </tr>
            <tr>
              <td>管理员</td>
              <td>{{fliterData('manager')}}</td>
              <td>联系方式</td>
              <td>{{fliterData('telephone')}}</td>
            </tr>
            <tr>
              <td>纬度</td>
              <td>{{fliterData('lat')}}</td>
              <td>经度</td>
              <td>{{fliterData('lng')}}</td>
            </tr>
            <tr>
              <td>所属镇街</td>
              <td colspan="3">{{fliterData('town')}}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="GykjMap-emergency-table" v-show="activeTab === 'measures'">
        <table border class="table">
          <tr>
            <td rowspan="2">物资供应商</td>
            <td>名称</td>
            <td>联系人</td>
            <td>联系电话</td>
          </tr>
          <tr>
            <td>{{fliterDouData('supplier.name')}}</td>
            <td>{{fliterDouData('supplier.name')}}</td>
            <td>{{fliterDouData('supplier.name')}}</td>
          </tr>
          <tr v-for="(item,index) in fliterData('datas')" :key="index">
            <td>物资名称</td>
            <td>{{item.name}}</td>
            <td>数量(<span>{{item.spec}}</span>)</td>
            <td>{{item.qty}}</td>
          </tr>
        </table>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {},
      activeTab: 'info'
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterDouData (key) {
      const arr = key.split('.')

      if (this.resultData[arr[0]] === undefined) {
        this.resultData[arr[0]] = {}
      }

      return this.resultData[arr[0]][arr[1]] || '--'
    },
    initData (data = {}) {
      this.resultData = data
      this.activeTab = 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-emergency {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .GykjMap-emergency-tabs {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
  }
  .GykjMap-emergency-content {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 40px;
    bottom: 5px;
    .GykjMap-emergency-table {
      width: 100%;
      height: 100%;
      overflow: auto;
      .table {
        width: 100%;
        margin: auto;
        font-size: 14px;
        border: 1px solid #ddd;
        margin: 5px 0;
        td {
          padding: 5px;
          &.key {
            width: 100px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
